Solid Router: SolidJS-da Mijoz Tomonidan Navigatsiyani O'zlashtirish

O'zining ajoyib ishlashi va soddaligi bilan tanilgan SolidJS zamonaviy veb-ilovalar yaratish uchun ajoyib asosni taqdim etadi. Haqiqatan ham jozibali va foydalanuvchiga qulay tajribalar yaratish uchun mustahkam mijoz tomoni routeri muhim ahamiyatga ega. Bu yerda Solid Router - SolidJS uchun rasmiy va tavsiya etilgan router bo'lib, u freymvorkning reaktiv tamoyillari bilan uzluksiz integratsiyalash uchun mo'ljallangan.

Ushbu keng qamrovli qo'llanma Solid Router olamiga chuqur kirib, murakkab va dinamik bir sahifali ilovalar (SPA) yaratish uchun asosiy sozlashdan tortib ilg'or texnikalargacha bo'lgan hamma narsani qamrab oladi. Tajribali SolidJS dasturchisi bo'lasizmi yoki endigina ish boshlayapsizmi, ushbu maqola sizni mijoz tomoni navigatsiyasini o'zlashtirish uchun zarur bilim va ko'nikmalar bilan ta'minlaydi.

Solid Router nima?

Solid Router - bu SolidJS uchun maxsus ishlab chiqilgan yengil va samarali mijoz tomoni routeri. U brauzer URL manzilidagi o'zgarishlarga asoslanib UI ni samarali yangilash uchun SolidJS ning reaktivligidan foydalanadi. Virtual DOM diffingga tayanadigan an'anaviy routerlardan farqli o'laroq, Solid Router to'g'ridan-to'g'ri DOM bilan ishlaydi, bu esa tezroq va oldindan aytib bo'ladigan ishlashga olib keladi.

Solid Router-ning asosiy xususiyatlariga quyidagilar kiradi:

• Deklarativ Marshrutlash: Oddiy va intuitiv JSX asosidagi API yordamida marshrutlaringizni belgilang.
• Dinamik Marshrutlash: Parametrlar bilan marshrutlarni osonlikcha boshqaring, bu sizga dinamik va ma'lumotlarga asoslangan ilovalar yaratish imkonini beradi.
• Ichki Marshrutlar: Ilovangizni ichki marshrutlar yordamida mantiqiy bo'limlarga ajrating.
• Link Komponenti: URL yangilanishlarini va faol havola uslublarini avtomatik ravishda boshqaradigan <A> komponenti yordamida marshrutlar o'rtasida uzluksiz harakatlaning.
• Ma'lumotlarni Yuklash: Marshrutni render qilishdan oldin ma'lumotlarni asinxron ravishda yuklang, bu esa foydalanuvchiga silliq tajriba taqdim etadi.
• O'tishlar: Foydalanuvchi tajribasini yaxshilash uchun marshrutlar o'rtasida vizual jozibali o'tishlar yarating.
• Xatolarni Qayta Ishlash: Xatolarni to'g'ri qayta ishlang va maxsus xatolik sahifalarini ko'rsating.
• History API Integratsiyasi: Brauzerning History API bilan uzluksiz integratsiyalashib, foydalanuvchilarga orqaga va oldinga tugmalari yordamida harakatlanish imkonini beradi.

Solid Router bilan Ishlashni Boshlash

O'rnatish

Solid Router-ni o'rnatish uchun o'zingiz afzal ko'rgan paket menejeridan foydalaning:

            npm install @solidjs/router
yarn add @solidjs/router
pnpm add @solidjs/router
            

              
                Copy
              
            
          

Asosiy Sozlash

Solid Router-ning asosi <Router> va <Route> komponentlari atrofida qurilgan. <Router> komponenti ilovangizning marshrutlash tizimining ildizi bo'lib xizmat qiladi, <Route> komponentlari esa URL manzillar va komponentlar o'rtasidagi bog'liqlikni belgilaydi.

Mana bir oddiy misol:

            import { Router, Route } from '@solidjs/router';
import Home from './components/Home';
import About from './components/About';

function App() {
  return (
    <Router>
      <Route path="/"> <Home/> </Route>
      <Route path="/about"> <About/> </Route>
    </Router>
  );
}

export default App;
            

              
                Copy
              
            
          

Ushbu misolda, <Router> komponenti butun ilovani o'rab turadi. <Route> komponentlari ikkita marshrutni belgilaydi: biri ildiz yo'li ("/") uchun va ikkinchisi "/about" yo'li uchun. Foydalanuvchi ushbu yo'llardan biriga o'tganda, mos keladigan komponent (Home yoki About) render qilinadi.

<A> Komponenti

Marshrutlar o'rtasida harakatlanish uchun Solid Router tomonidan taqdim etilgan <A> komponentidan foydalaning. Bu komponent oddiy HTML <a> tegiga o'xshaydi, lekin u URL yangilanishlarini avtomatik ravishda boshqaradi va sahifaning to'liq qayta yuklanishini oldini oladi.

            import { A } from '@solidjs/router';

function Navigation() {
  return (
    <nav>
      <A href="/">Home</A>
      <A href="/about">About</A>
    </nav>
  );
}

export default Navigation;
            

              
                Copy
              
            
          

Foydalanuvchi ushbu havolalardan birini bosganda, Solid Router brauzerning URL manzilini yangilaydi va sahifani to'liq qayta yuklamasdan mos keladigan komponentni render qiladi.

Ilg'or Marshrutlash Texnikalari

Marshrut Parametrlari Bilan Dinamik Marshrutlash

Solid Router dinamik marshrutlashni qo'llab-quvvatlaydi, bu sizga parametrlar bilan marshrutlar yaratish imkonini beradi. Bu ma'lum bir ID yoki slagg'a asoslangan kontentni ko'rsatish uchun foydalidir.

            import { Router, Route } from '@solidjs/router';
import UserProfile from './components/UserProfile';

function App() {
  return (
    <Router>
      <Route path="/users/:id"> <UserProfile/> </Route>
    </Router>
  );
}

export default App;
            

              
                Copy
              
            
          

Ushbu misolda, yo'ldagi :id segmenti marshrut parametri hisoblanadi. UserProfile komponenti ichida id parametrining qiymatini olish uchun siz useParams hookidan foydalanishingiz mumkin:

            import { useParams } from '@solidjs/router';
import { createResource } from 'solid-js';

function UserProfile() {
  const params = useParams();
  const [user] = createResource(() => params.id, fetchUser);

  return (
    <div>
      <h1>User Profile</h1>
      {user() ? (
        <div>
          <p>Name: {user().name}</p>
          <p>Email: {user().email}</p>
        </div>
      ) : (<p>Loading...</p>)}
    </div>
  );
}

async function fetchUser(id: string) {
  const response = await fetch(`https://api.example.com/users/${id}`);
  return response.json();
}

export default UserProfile;
            

              
                Copy
              
            
          

useParams hooki marshrut parametrlarini o'z ichiga olgan obyektni qaytaradi. Bu holda, params.id URL manzilidagi id parametrining qiymatini o'z ichiga oladi. Keyin createResource hooki ID asosida foydalanuvchi ma'lumotlarini olish uchun ishlatiladi.

Xalqaro Misol: Global elektron tijorat platformasini tasavvur qiling. Siz mahsulot ID siga asoslanib mahsulot tafsilotlarini ko'rsatish uchun dinamik marshrutlashdan foydalanishingiz mumkin: /products/:productId. Bu har bir mahsulot uchun noyob URL manzillarini osongina yaratish imkonini beradi, bu esa foydalanuvchilarning joylashuvidan qat'i nazar, ma'lum bir mahsulotni ulashishini va xatcho'plarga qo'shishini osonlashtiradi.

Ichki Marshrutlar

Ichki marshrutlar ilovangizni mantiqiy bo'limlarga ajratish imkonini beradi. Bu, ayniqsa, ko'p darajali navigatsiyaga ega murakkab ilovalar uchun foydalidir.

            import { Router, Route } from '@solidjs/router';
import Dashboard from './components/Dashboard';
import Profile from './components/Profile';
import Settings from './components/Settings';

function App() {
  return (
    <Router>
      <Route path="/dashboard">
        <Dashboard/>
        <Route path="/profile"> <Profile/> </Route>
        <Route path="/settings"> <Settings/> </Route>
      </Route>
    </Router>
  );
}

export default App;
            

              
                Copy
              
            
          

Ushbu misolda, <Dashboard> komponenti <Profile> va <Settings> komponentlari uchun konteyner bo'lib xizmat qiladi. <Profile> va <Settings> marshrutlari <Dashboard> marshruti ichida joylashgan, ya'ni ular faqat foydalanuvchi "/dashboard" yo'lida bo'lganda render qilinadi.

<Dashboard> komponenti ichida ichki marshrutlarni render qilish uchun siz <Outlet> komponentidan foydalanishingiz kerak:

            import { Outlet } from '@solidjs/router';

function Dashboard() {
  return (
    <div>
      <h1>Dashboard</h1>
      <nav>
        <A href="/dashboard/profile">Profile</A>
        <A href="/dashboard/settings">Settings</A>
      </nav>
      <Outlet/>
    </div>
  );
}

export default Dashboard;
            

              
                Copy
              
            
          

<Outlet> komponenti ichki marshrutlar render qilinadigan joyni belgilovchi vazifasini bajaradi. Foydalanuvchi "/dashboard/profile" manziliga o'tganda, <Profile> komponenti <Outlet> komponenti ichida render qilinadi. Xuddi shunday, foydalanuvchi "/dashboard/settings" manziliga o'tganda, <Settings> komponenti <Outlet> komponenti ichida render qilinadi.

createResource Yordamida Ma'lumotlarni Yuklash

Marshrutni render qilishdan oldin ma'lumotlarni asinxron yuklash foydalanuvchiga silliq tajriba taqdim etish uchun juda muhimdir. Solid Router SolidJS ning createResource hooki bilan uzluksiz integratsiyalashib, ma'lumotlarni yuklashni osonlashtiradi.

Biz bunga avvalroq UserProfile komponentida misol ko'rgan edik, ammo tushunarli bo'lishi uchun bu yerda yana bir bor keltirilgan:

            import { useParams } from '@solidjs/router';
import { createResource } from 'solid-js';

function UserProfile() {
  const params = useParams();
  const [user] = createResource(() => params.id, fetchUser);

  return (
    <div>
      <h1>User Profile</h1>
      {user() ? (
        <div>
          <p>Name: {user().name}</p>
          <p>Email: {user().email}</p>
        </div>
      ) : (<p>Loading...</p>)}
    </div>
  );
}

async function fetchUser(id: string) {
  const response = await fetch(`https://api.example.com/users/${id}`);
  return response.json();
}

export default UserProfile;
            

              
                Copy
              
            
          

createResource hooki ikkita argument qabul qiladi: ma'lumotlarni yuklashni boshlovchi signal va ma'lumotlarni olib keluvchi funksiya. Bu holda, signal () => params.id, bu degani ma'lumotlar id parametri o'zgarganda har doim olinadi. fetchUser funksiyasi ID asosida APIdan foydalanuvchi ma'lumotlarini olib keladi.

createResource hooki resursni (olinadigan ma'lumotlar) va ma'lumotlarni qayta yuklash uchun funksiyani o'z ichiga olgan massivni qaytaradi. Resurs - bu ma'lumotlarni saqlaydigan signal. Ma'lumotlarga signalni chaqirish orqali (user()) kirishingiz mumkin. Agar ma'lumotlar hali yuklanayotgan bo'lsa, signal undefined qiymatini qaytaradi. Bu ma'lumotlar olinayotganda yuklanish indikatorini ko'rsatish imkonini beradi.

O'tishlar

Marshrutlar o'rtasida o'tishlar qo'shish foydalanuvchi tajribasini sezilarli darajada yaxshilashi mumkin. Solid Router-da o'rnatilgan o'tishlarni qo'llab-quvvatlash mavjud bo'lmasa-da, u silliq va vizual jozibali o'tishlarga erishish uchun solid-transition-group kabi kutubxonalar bilan yaxshi integratsiyalashadi.

Avvalo, solid-transition-group paketini o'rnating:

            npm install solid-transition-group
yarn add solid-transition-group
pnpm add solid-transition-group
            

              
                Copy
              
            
          

Keyin, marshrutlaringizni <TransitionGroup> komponenti bilan o'rang:

            import { Router, Route } from '@solidjs/router';
import { TransitionGroup, Transition } from 'solid-transition-group';
import Home from './components/Home';
import About from './components/About';

function App() {
  return (
    <Router>
      <TransitionGroup>
        <Route path="/">
          <Transition name="fade" duration={300}>
            <Home/>
          </Transition>
        </Route>
        <Route path="/about">
          <Transition name="fade" duration={300}>
            <About/>
          </Transition>
        </Route>
      </TransitionGroup>
    </Router>
  );
}

export default App;
            

              
                Copy
              
            
          

Ushbu misolda har bir marshrut <Transition> komponenti bilan o'ralgan. name prop o'tish uchun CSS klass prefiksini belgilaydi, duration prop esa o'tish davomiyligini millisekundlarda belgilaydi.

Siz uslublar jadvalingizda o'tish uchun mos keladigan CSS klasslarini belgilashingiz kerak bo'ladi:

            .fade-enter {
  opacity: 0;
}

.fade-enter-active {
  opacity: 1;
  transition: opacity 300ms ease-in;
}

.fade-exit {
  opacity: 1;
}

.fade-exit-active {
  opacity: 0;
  transition: opacity 300ms ease-out;
}
            

              
                Copy
              
            
          

Ushbu CSS kodi oddiy paydo bo'lish/yo'qolish (fade-in/fade-out) o'tishini belgilaydi. Marshrutga kirilganda, .fade-enter va .fade-enter-active klasslari qo'llaniladi, bu komponentning paydo bo'lishiga olib keladi. Marshrutdan chiqilganda, .fade-exit va .fade-exit-active klasslari qo'llaniladi, bu komponentning yo'qolishiga olib keladi.

Xatolarni Qayta Ishlash

Xatolarni to'g'ri qayta ishlash yaxshi foydalanuvchi tajribasini ta'minlash uchun muhimdir. Solid Router-da o'rnatilgan xatolarni qayta ishlash mexanizmi yo'q, lekin siz uni global xatolik chegarasi (error boundary) yoki marshrutga xos xatolik ishlovchisi yordamida osongina amalga oshirishingiz mumkin.

Mana global xatolik chegarasiga misol:

            import { createSignal, Suspense, ErrorBoundary } from 'solid-js';
import { Router, Route } from '@solidjs/router';
import Home from './components/Home';
import About from './components/About';

function App() {
  const [error, setError] = createSignal(null);

  return (
    <ErrorBoundary fallback={<p>Something went wrong: {error()?.message}</p>}>
      <Suspense fallback={<p>Loading...</p>}>
        <Router>
          <Route path="/"> <Home/> </Route>
          <Route path="/about"> <About/> </Route>
        </Router>
      </Suspense>
    </ErrorBoundary>
  );
}

export default App;
            

              
                Copy
              
            
          

<ErrorBoundary> komponenti o'zining ichki elementlarida yuzaga keladigan har qanday xatolarni ushlab oladi. fallback prop xatolik yuzaga kelganda render qilinadigan komponentni belgilaydi. Bu holda, u xato xabari bilan paragrafni render qiladi.

<Suspense> komponenti kutilayotgan promislarni (promise) boshqaradi, odatda asinxron komponentlar yoki ma'lumotlarni yuklash bilan ishlatiladi. U promislar bajarilgunga qadar `fallback` propini ko'rsatadi.

Xatolikni keltirib chiqarish uchun siz komponent ichida istisno (exception) yuborishingiz mumkin:

            function Home() {
  throw new Error('Failed to load home page');

  return <h1>Home</h1>;
}

export default Home;
            

              
                Copy
              
            
          

Ushbu kod bajarilganda, <ErrorBoundary> komponenti xatoni ushlab oladi va zaxira (fallback) komponentini render qiladi.

Xalqaro Mulohazalar: Xato xabarlarini ko'rsatishda xalqarolashtirishni (i18n) hisobga oling. Foydalanuvchining afzal ko'rgan tilida xato xabarlarini taqdim etish uchun tarjima kutubxonasidan foydalaning. Masalan, Yaponiyadagi foydalanuvchi xatolikka duch kelsa, u xato xabarini ingliz tilida emas, yapon tilida ko'rishi kerak.

Solid Router-dan Foydalanishning Eng Yaxshi Amaliyotlari

• Marshrutlaringizni tartibli saqlang: Ilovangizni mantiqiy bo'limlarga ajratish uchun ichki marshrutlardan foydalaning. Bu kodingizni saqlash va unda harakatlanishni osonlashtiradi.
• Dinamik kontent uchun marshrut parametrlaridan foydalaning: Muayyan ID yoki slagg'a asoslangan kontentni ko'rsatish uchun dinamik URL manzillarini yaratishda marshrut parametrlaridan foydalaning.
• Ma'lumotlarni asinxron yuklang: Foydalanuvchiga silliq tajriba taqdim etish uchun marshrutni render qilishdan oldin ma'lumotlarni asinxron yuklang.
• Marshrutlar o'rtasida o'tishlar qo'shing: Foydalanuvchi tajribasini yaxshilash va ilovangizni yanada sayqallangan his qilish uchun o'tishlardan foydalaning.
• Xatolarni to'g'ri qayta ishlang: Xatolarni ushlab olish va ularni foydalanuvchiga qulay tarzda ko'rsatish uchun xatolarni qayta ishlashni joriy qiling.
• Tushunarli marshrut nomlaridan foydalaning: Marshrut mazmunini aniq aks ettiruvchi marshrut nomlarini tanlang. Bu ilovangiz tuzilishini tushunishni osonlashtiradi.
• Marshrutlaringizni sinovdan o'tkazing: Marshrutlaringiz to'g'ri ishlayotganiga ishonch hosil qilish uchun birlik testlarini yozing. Bu sizga xatolarni erta aniqlashga va regressiyalarning oldini olishga yordam beradi.

Xulosa

Solid Router - bu SolidJS bilan uzluksiz integratsiyalashgan kuchli va moslashuvchan mijoz tomoni routeri. Uning xususiyatlarini o'zlashtirib va eng yaxshi amaliyotlarga rioya qilib, siz silliq va jozibali foydalanuvchi tajribasini taqdim etadigan murakkab va dinamik bir sahifali ilovalarni yaratishingiz mumkin. Asosiy sozlashdan tortib, dinamik marshrutlash, ma'lumotlarni yuklash va o'tishlar kabi ilg'or texnikalargacha, ushbu qo'llanma sizga SolidJS da mijoz tomoni navigatsiyasi olamida ishonch bilan harakat qilish uchun bilim va ko'nikmalarni taqdim etdi. Solid Router kuchini qabul qiling va SolidJS ilovalaringizning to'liq salohiyatini oching!

Eng so'nggi ma'lumotlar va misollar uchun rasmiy Solid Router hujjatlariga murojaat qilishni unutmang: [Solid Router Hujjatlari Havolasi - O'rinbosar]

SolidJS bilan ajoyib narsalar yaratishda davom eting!